<template>
  <div :class="{isControldetil:isControlTo,intelligentcontroldetil:!isControlTo}">
    <div class="intelligent-control-top" v-if="!isControlTo">
      <div class="top-back" @click="back"></div>
    </div>
    <div class="intelligent-control-detil-con">
      <div class="left-tree borderStyle">
        <LeftTree @TerrClickObj="TerrClickObj" />
        <!-- 树 -->
      </div>
      <div class="right-con borderStyle">
        <div class="right-con-btn">
          <el-button
            class="intelligent-btn"
            v-for="(item,index) in btndata"
            :key="index"
            type="primary"
            @click="btnclick(item.value)"
          >{{item.name}}</el-button>
        </div>
        <div class="right-box" v-if="isshow ==1">
          <div class="intelligent-content">
            <div class="intelligent-content-item" v-for="(item,index) in tableList" :key="index">
              <div class="content-item-title">{{item.areaName}}</div>
              <div class="content-item-line"></div>
              <div class="content-item-con">
                <div class="content-item-img"  v-if="item.value">
                  <div v-if="item.deviceType =='0501'" class="dg1"></div>
                  <div v-else-if="item.deviceType =='0403'" class="fj1"></div>
                  <div v-else-if="item.deviceType =='0201'" class="mj1"></div>
                  <div v-else-if="item.deviceType =='0407'" class="kt1"></div>
                  <div v-else-if="item.deviceType =='0601'" class="sq1"></div>
                  <div v-else-if="item.deviceType =='0108'" class="xf1"></div>
                  <div v-else-if="item.deviceType =='0205'" class="af1"></div>
                  <div v-else class="mj1"></div>
                </div>
                <div class="content-item-img" v-else>
                  <div v-if="item.deviceType =='0501'" class="dg"></div>
                  <div v-else-if="item.deviceType =='0403'" class="fj"></div>
                  <div v-else-if="item.deviceType =='0201'" class="mj"></div>
                  <div v-else-if="item.deviceType =='0407'" class="kt"></div>
                  <div v-else-if="item.deviceType =='0601'" class="sq"></div>
                  <div v-else-if="item.deviceType =='0108'" class="xf"></div>
                  <div v-else-if="item.deviceType =='0205'" class="af"></div>
                  <div v-else class="mj"></div>

                </div>
                <!-- 测试用 -->
                <!-- <div class="content-item-img"  v-if="item.value"> -->
                  <!-- <div  class="dg1"></div> -->
                  <!-- <div  class="fj1"></div> -->
                  <!-- <div  class="mj1"></div> -->
                  <!-- <div  class="kt1"></div> -->
                  <!-- <div  class="sq1"></div> -->
                  <!-- <div class="xf1"></div> -->
                  <!-- <div  class="af1"></div> -->
                <!-- </div> -->
                <!-- <div class="content-item-img" v-else> -->
                  <!-- <div  class="dg"></div> -->
                  <!-- <div  class="fj"></div> -->
                  <!-- <div  class="mj"></div> -->
                  <!-- <div  class="kt"></div> -->
                  <!-- <div  class="sq"></div> -->
                  <!-- <div class="xf"></div> -->
                  <!-- <div  class="af"></div> -->
                <!-- </div> -->
                <div class="content-item-control">
                  <div>
                    <div class="content-item-text" :title="item.name">{{item.name}}</div>
                    <el-switch
                      class="switch"
                      v-model="item.value"
                      active-color="#468EF9"
                      inactive-color="rgba(0,0,0,0)"
                      active-text="开"
                      inactive-text="关"
                      @change="vlaueChange(item)"
                    ></el-switch>
                  </div>
                  <!-- <div>
                    <div class="content-item-text">关联图像</div>
                    <el-switch
                      class="switch"
                      v-model="item.switch"
                      active-color="#468EF9"
                      inactive-color="rgba(0,0,0,0)"
                    ></el-switch>
                  </div>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="isshow==2">
          <div class="state">未查到相关数据！</div>
        </div>
        <div v-if="isshow==3">
          <div class="state">请选择变电站节点！</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import LeftTree from "./LeftTree.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import tree from "@/components/Navs/tree.vue";
@Component({ components: { LeftTree } })
export default class extends Vue {
  // 是否是点击运行监视页面控制操作按钮跳转过来的
  private isControlTo = false;
  // 监听路由变化
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    console.log("to.name:", to.name);
    if (to.name == "operationmonitorindex") {
      // 首页地图右击，进入运行监视，点击控制操作跳转过来的
      this.isControlTo = true;
    } else {
      // 首页左下角，点击远程控制跳转过来的
      this.isControlTo = false;
    }
  }
  //控制右边显示隐藏
  isshow = 3;
  public btndata = [
    {
      name: "灯光",
      value: "0501",
    },
    {
      name: "风机",
      value: "0403",
    },
    {
      name: "门禁",
      value: "0201",
    },
    {
      name: "空调",
      value: "0407",
    },
    {
      name: "水泵",
      value: "0601",
    },
    {
      name: "消防",
      value: "0108",
    },
    // {
    //   name: "安防",
    //   value: "0205",
    // },
    {
      name:'红外双鉴',
      value:"0204"
    }
  ];
  device = [];
  public btnclick(val) {
    console.log('this.device:',this.device);
    
    this.tableList = this.device.filter((item) => {
      if (item.deviceType == val) {
        return item;
      }
    });
    console.log(this.tableList);
  }
  public itemlick() {}
  // public itemdata = [
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  //   {
  //     title: "1-2号蓄电池室",
  //     control: "风机",
  //     id: "xxx",
  //     switch: false,
  //   },
  // ];
  //返回
  back() {
    this.$router.push("homepage/index");
  }
  // 点击树图obj
  tableList = [];
  // 拷贝数组
  dataList = [];
  TerrClickObj(data) {
    if (data.type == "ORG") {
      this.isshow = 3;
      return;
    }
    // console.log(data);

    if (data.child) {
      // console.log(1);
      let xtInfo = GetSocketModule.getterAllAuxiliaryByStationId[data.id] || [];
      var equipmentScreen = [];
      xtInfo.forEach((v) => {
        if (v.remoteType === "3") {
          equipmentScreen.push(v);
        }
      });
      this.dataList = unique(equipmentScreen);
      this.dataList.map((item) => {
        if (!item.value || item.value == "0") {
          item.value = false;
        } else {
          item.value = true;
        }
      });
      this.tableList = JSON.parse(JSON.stringify(this.dataList));
      this.device = JSON.parse(JSON.stringify(this.dataList));
    }
    if (!data.child) {
      console.log(2);
      this.tableList = [];
      this.device = [];
      this.dataList.forEach((item) => {
        if (item.area == data.id) {
          this.tableList.push(item);
          this.device.push(item);
        }
      });
    }

    if (this.tableList.length > 0) {
      // console.log(data);
      this.isshow = 1;
    } else {
      this.isshow = 2;
    }
    console.log(this.tableList);
    function unique(arr) {
      let res = new Map();
      return arr.filter(
        (arr) => !res.has(arr.deviceId) && res.set(arr.deviceId, 1)
      );
    }
  }
  vlaueChange(item) {
    console.log(item);
    var from: any = {};
    if (item.value == false) {
      from.command = "0";
    } else {
      from.command = "1";
    }
    from.pointerId = item.id;
    console.log(from);

    (this as any).$services
      .sendPointerCommand({ data: from, method: "post",postparams:true })
      .then((result: any) => {
        console.log(result);
        if (result.code == 200) {
          this.$message({
            message:`${result.message}`,
            type:'success'
          })
        }else{
          this.$message({
            message:`${result.message}`,
            type:'warning'
          })
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.$message({
            message:`操作失败`,
            type:'warning'
          })
      });
  }
}
</script>

<style lang="scss" scoped>
.isControldetil {
  // background-color: burlywood;
  width: 100%;
  height: 100%;
  .intelligent-control-top {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 0.45rem;
  }
  .intelligent-control-detil-con {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left-tree {
      width: 3.92rem;
      height: 100%;
      padding: 0.16rem;
      overflow: auto;
    }
    .right-con {
      width: calc(100% - 4.1rem);
      height: 100%;
      padding: 0.4rem;
      .right-box {
        width: 100%;
        height: 100%;
      }
      .right-con-btn {
        height: 0.45rem;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .intelligent-content {
        width: 100%;
        height: calc(100% - 0.45rem);
        display: flex;
        place-content: flex-start flex-start;
        flex-flow: row wrap;
        align-items: flex-start;
        overflow-y: auto;
        .intelligent-content-item {
          margin: 0.2rem;
          width: 3rem;
          height: 2.4rem;
          background: #102a76;
          border: 2px solid #1559b5;
          box-shadow: 0px 8px 8px 0px rgba(8, 21, 63, 0.28);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .content-item-title {
            width: 100%;
            text-align: center;
            font-size: 0.18rem;
            line-height: 0.28rem;
          }
          .content-item-line {
            width: 100%;
            height: 0.02rem;
            background: linear-gradient(
              90deg,
              rgba(46, 134, 253, 0) 0%,
              rgba(46, 134, 253, 0.97) 53%,
              rgba(46, 134, 253, 0) 100%
            );
          }
          .content-item-con {
            display: flex;
            width: 100%;
            height: 1.8rem;
            justify-content: center;
            align-items: center;
            .content-item-img {
              width: 50%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              > div {
                width: 70px;
                height: 100px;
              }
              .af1 {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/af.png) no-repeat;
                background-size: 100%;
              }
              .af {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/anfang1.png) no-repeat;
                background-size: 100%;
              }
              .dg1 {
                width: 0.57rem;
                height: 0.76rem;
                background: url(../../assets/img/sbicon/dg.png) no-repeat;
                background-size: 100%;
              }
              .dg {
                width: 0.57rem;
                height: 0.76rem;
                background: url(../../assets/img/sbicon/dengguang1.png) no-repeat;
                background-size: 100%;
              }
              .fj1 {
                width: 0.86rem;
                height: 0.65rem;
                background: url(../../assets/img/sbicon/fj.png) no-repeat;
                background-size: 100% 100%;
              }
              .fj {
                width: 0.86rem;
                height: 0.65rem;
                background: url(../../assets/img/sbicon/fengji1.png) no-repeat;
                background-size: 100% 100%;
              }
              .kt1 {
                width: 0.74rem;
                height: 0.63rem;
                background: url(../../assets/img/sbicon/kt.png) no-repeat;
                background-size: 100% 100%;
              }
              .kt {
                width: 0.74rem;
                height: 0.63rem;
                background: url(../../assets/img/sbicon/kongtiao1.png) no-repeat;
                background-size: 100% 100%;
              }
              .mj1 {
                width: 0.67rem;
                height: 0.66rem;
                background: url(../../assets/img/sbicon/mj.png) no-repeat;
                background-size: 100% 100%;
              }
              .mj {
                width: 0.67rem;
                height: 0.66rem;
                background: url(../../assets/img/sbicon/menjin1.png) no-repeat;
                background-size: 100% 100%;
              }
              .sq1 {
                width: 0.82rem;
                height: 0.58rem;
                background: url(../../assets/img/sbicon/sq.png) no-repeat;
                background-size: 100% 100%;
              }
              .sq {
                width: 0.82rem;
                height: 0.58rem;
                background: url(../../assets/img/sbicon/shuibeng1.png) no-repeat;
                background-size: 100% 100%;
              }
              .xf1 {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/xf.png) no-repeat;
                background-size: 100% 100%;
              }
              .xf {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/xiaofang1.png) no-repeat;
                background-size: 100% 100%;
              }
            }
            .content-item-control {
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              > div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 80px;
                > div {
                  height: 60%;
                  
                }
                
              }
            }
            .content-item-switch {
              width: 0.4rem;
            }
            .content-item-text {
              margin-bottom: 0.05rem;
              display: flex;
              align-items: center;
              // overflow: hidden;
              // white-space: nowrap;
              // text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .state {
    text-align: center;
  }
}
.intelligentcontroldetil {
  // background-color: burlywood;
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  padding-top: 0.88rem;
  .intelligent-control-top {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 0.45rem;
  }
  .intelligent-control-detil-con {
    height: calc(100% - 0.45rem);
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left-tree {
      width: 3.92rem;
      height: 100%;
      padding: 0.16rem;
      overflow: auto;
    }
    .right-con {
      width: calc(100% - 4.1rem);
      height: 100%;
      padding: 0.4rem;
      .right-box {
        width: 100%;
        height: 100%;
      }
      .right-con-btn {
        height: 0.45rem;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .intelligent-content {
        width: 100%;
        height: calc(100% - 0.45rem);
        display: flex;
        place-content: flex-start flex-start;
        flex-flow: row wrap;
        align-items: flex-start;
        overflow-y: auto;
        .intelligent-content-item {
          margin: 0.2rem;
          width: 3rem;
          height: 2.4rem;
          background: #102a76;
          border: 2px solid #1559b5;
          box-shadow: 0px 8px 8px 0px rgba(8, 21, 63, 0.28);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .content-item-title {
            width: 100%;
            text-align: center;
            font-size: 0.18rem;
            line-height: 0.28rem;
          }
          .content-item-line {
            width: 100%;
            height: 0.02rem;
            background: linear-gradient(
              90deg,
              rgba(46, 134, 253, 0) 0%,
              rgba(46, 134, 253, 0.97) 53%,
              rgba(46, 134, 253, 0) 100%
            );
          }
          .content-item-con {
            display: flex;
            width: 100%;
            height: 1.8rem;
            justify-content: center;
            align-items: center;
            .content-item-img {
              width: 50%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              > div {
                width: 70px;
                height: 100px;
                // font-size: 0.8rem;
                // color: #2293f3;
              }
             .af1 {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/af.png) no-repeat;
                background-size: 100%;
              }
              .af {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/anfang1.png) no-repeat;
                background-size: 100%;
              }
              .dg1 {
                width: 0.57rem;
                height: 0.76rem;
                background: url(../../assets/img/sbicon/dg.png) no-repeat;
                background-size: 100%;
              }
              .dg {
                width: 0.57rem;
                height: 0.76rem;
                background: url(../../assets/img/sbicon/dengguang1.png) no-repeat;
                background-size: 100%;
              }
              .fj1 {
                width: 0.86rem;
                height: 0.65rem;
                background: url(../../assets/img/sbicon/fj.png) no-repeat;
                background-size: 100% 100%;
              }
              .fj {
                width: 0.86rem;
                height: 0.65rem;
                background: url(../../assets/img/sbicon/fengji1.png) no-repeat;
                background-size: 100% 100%;
              }
              .kt1 {
                width: 0.74rem;
                height: 0.63rem;
                background: url(../../assets/img/sbicon/kt.png) no-repeat;
                background-size: 100% 100%;
              }
              .kt {
                width: 0.74rem;
                height: 0.63rem;
                background: url(../../assets/img/sbicon/kongtiao1.png) no-repeat;
                background-size: 100% 100%;
              }
              .mj1 {
                width: 0.67rem;
                height: 0.66rem;
                background: url(../../assets/img/sbicon/mj.png) no-repeat;
                background-size: 100% 100%;
              }
              .mj {
                width: 0.67rem;
                height: 0.66rem;
                background: url(../../assets/img/sbicon/menjin1.png) no-repeat;
                background-size: 100% 100%;
              }
              .sq1 {
                width: 0.82rem;
                height: 0.58rem;
                background: url(../../assets/img/sbicon/sq.png) no-repeat;
                background-size: 100% 100%;
              }
              .sq {
                width: 0.82rem;
                height: 0.58rem;
                background: url(../../assets/img/sbicon/shuibeng1.png) no-repeat;
                background-size: 100% 100%;
              }
              .xf1 {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/xf.png) no-repeat;
                background-size: 100% 100%;
              }
              .xf {
                width: 0.63rem;
                height: 0.75rem;
                background: url(../../assets/img/sbicon/xiaofang1.png) no-repeat;
                background-size: 100% 100%;
              }
            }
            .content-item-control {
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              > div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 80px;
                > div {
                  height: 60%;
                }
              }
            }
            .content-item-switch {
              width: 0.4rem;
            }
            .content-item-text {
              margin-bottom: 0.05rem;
              display: flex;
              align-items: center;
              // overflow: hidden;
              // white-space: nowrap;
              // text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .state {
    text-align: center;
  }
}
</style>
<style lang="scss">
.intelligent-btn {
  margin-left: 0.2rem;
}
.switch {
  .el-switch__core:after {
    background: #468ef9;
  }
  .el-switch__core {
    border: 1px solid #1559b5 !important;
    background-color: transparent !important;
  }
  .el-switch__label{
    line-height: 0.2rem;
    color: rgb(102, 94, 94);
  }
  .el-switch__label.is-active{
    color:   #fff;
  }
}
</style>
